<template>
	<view class="content">
		<view class="infoBox">
			<view class="item">
				<text class="label">头 像</text>
				<image :src="avatar" class="avatar"></image>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				</button>
				<text class="arrow">></text>
			</view>
			<view class="item">
				<text class="label">昵 称</text>
				<input type="nickname" class="name" v-model="name" />
				<image :src="baseUrl+'img/my/modify.png'" class="modify"></image>
			</view>
			<!-- <view class="item">
				<text class="label">地址管理</text>
				<text class="arrow">></text>
			</view> -->
		</view>
		<view class="logout" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; // 引入 Vuex store
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				name: '用户昵称',
				baseUrl: this.$baseUrl,
				avatar: this.$baseUrl + '/img/my/avatar.png',
			}
		},
		methods: {
			submit() {
				this.$request.post('userSet', {
					head: this.avatar,
					name: this.name
				}).then(res => {
					if (res.data.data) {
						this.$toast('修改成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})
			},
			onChooseAvatar(e) {
				console.log(e.target.avatarUrl);
				console.log(e);
				const token = store.state.token;
				
				
				
				
				
				
				
				uni.uploadFile({
					header: {
						"token": token,
						"Content-Type": "multipart/form-data",
					},
					url: 'https://juanjiahui.guguan.net/web/contractImage', // 上传接口地址
					filePath: e.target.avatarUrl,
					name: 'image',
					success: (res) => { //返回成功更新头像
						this.avatar = JSON.parse(res.data).data.filePath;
					},
					fail: (res) => {
						console.log(res);
						this.$toast('上传失败，请重新上传')
					}
				});
				
				// uni.chooseImage({
				// 	success: (res) => {
				// 		console.log(res)
				// 		const tempFilePaths = res.tempFilePaths;
				// 		console.log(tempFilePaths[0])
				// 		uni.uploadFile({
				// 			header: {
				// 				"token": token,
				// 				"Content-Type": "multipart/form-data",
				// 			},
				// 			url: 'https://juanjiahui.guguan.net/web/contractImage', // 上传接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'image',
				// 			success: (res) => { //返回成功更新头像
				// 				this.avatar = JSON.parse(res.data).data.filePath;
				// 			},
				// 			fail: (res) => {
				// 				this.$toast('上传失败，请重新上传')
				// 			}
				// 		});
				// 	}
				// });
				
				
				
				
				
			},
			getData() {
				this.$request.get('center').then(res => {
					if (res.data.data.name) {
						this.name = res.data.data.name;
					}
					if (res.data.data.head) {
						this.avatar = res.data.data.head;
					}
				})
			},
		},
		onLoad() {
			if (this.token) {
				this.getData();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getData();
						}
					}
				);
			}
		},
		computed: {
			...mapState(['token']),
		},
	}
</script>

<style lang="scss">
	.avatar-wrapper {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		left: 510rpx;
		opacity: 0;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-left: 450rpx;
	}

	.logout {
		width: 750rpx;
		height: 120rpx;
		background: #ffffff;
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 26rpx;
		text-align: center;
		color: #121212;
		line-height: 120rpx;
	}

	.infoBox {
		width: 670rpx;
		height: 360rpx;
		padding-left: 40rpx;
		padding-top: 50rpx;
		padding-right: 40rpx;
		background-color: #fff;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.name {
				position: absolute;
				right: 70rpx;
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
				text-align: right;
			}

			.modify {
				position: absolute;
				right: 0%;
				top: 50rpx;
				width: 21rpx;
				height: 25rpx;
			}

			.arrow {
				position: absolute;
				right: 0%;
				font-size: 24rpx;
				top: 50rpx;
				color: #929292;
			}



			.label {
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
			}
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
	}
</style>